<template>
    <div>
        <Row>
            <i-col span="24">
                <Card>
                    <Button class="opt-btn" @click="showAddModal" type="primary">添加</Button>
                    <Dropdown class="opt-btn" @on-click="batchOpt">
                        <Button type="primary">
                            批量操作
                            <Icon type="ios-arrow-down"></Icon>
                        </Button>
                        <DropdownMenu slot="list">
                            <DropdownItem name="batchActive">批量激活</DropdownItem>
                            <DropdownItem name="batchInactive"><span style="color: red;">批量冻结</span></DropdownItem>
                            <DropdownItem name="batchRemove" divided><span style="color: red;">批量删除</span></DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                    <Button class="opt-btn" @click="showSearchModal" type="primary">高级搜索</Button>
                    <Tooltip class="opt-btn" content="刷新" placement="right">
                        <Button icon="md-refresh" type="success" shape="circle" @click="searchTable(false)"></Button>
                    </Tooltip>
                    <Tooltip class="opt-btn" content="重置搜索" placement="right">
                        <Button icon="md-repeat" type="success" shape="circle" @click="researchTable"></Button>
                    </Tooltip>
                    <SysConfigTableMain ref="table" v-on:searchTable="searchTable" v-on:showEditModal="showEditModal" v-on:showDetailModal="showDetailModal"
                      v-on:showContentModal="showContentModal"/>
                </Card>
            </i-col>
        </Row>
        <SysConfigAddEditModal ref="addEditModal" v-on:add="add" v-on:edit="edit"/>
        <SysConfigSearchModal ref="searchModal" v-on:searchTable="searchTable"/>
        <SysConfigDetailModal ref="detailModal"/>
        <JsonModal ref="jsonModal" />
    </div>
</template>

<script>
    import * as utils from '@/api/utils-v2'
    import SysConfigTableMain from './SysConfigTableMain.vue'
    import SysConfigAddEditModal from './SysConfigAddEditModal.vue'
    import SysConfigSearchModal from './SysConfigSearchModal.vue'
    import SysConfigDetailModal from './SysConfigDetailModal.vue'
    import JsonModal from '_c/json-modal'
    export default {
        name: 'SysConfigMain',
        components: {
            SysConfigTableMain,
            SysConfigAddEditModal,
            SysConfigSearchModal,
            SysConfigDetailModal,
            JsonModal
        },
        data() {
            return {
                urls: {
                    batchRemoveUrl: '/sys-config/admin/batch-remove',
                    batchActiveUrl: '/sys-config/admin/batch-active'
                },
            }
        },
        computed: {},
        mounted() {},
        methods: {
            searchTable(reset) {
                utils.search(this, reset)
            },
            researchTable() {
                this.$refs.searchModal.resetForm()
                setTimeout(() => {
                    utils.search(this, true)
                }, 10);
            },
            showAddModal() {
                let addEditModal = this.$refs.addEditModal
                addEditModal.modal.add = true
            },
            add() {
                utils.add(this)
            },
            showEditModal(row) {
                let addEditModal = this.$refs.addEditModal
                addEditModal.form = JSON.parse(JSON.stringify(row))
                addEditModal.form.value = JSON.parse(row.value)
                addEditModal.form.comment = JSON.parse(row.comment)
                addEditModal.modal.edit = true
                if (row.name == 'sys_pic_config') {
                  const valueJson = JSON.parse(row.value)
                  const valueDescJson = JSON.parse(row.comment)
                  let itemList = []
                  for (let i in valueJson) {
                    let item = {
                      'key': i,
                      'value': valueJson[i]
                    }
                    for (let j in valueDescJson) {
                      if (i == j) {
                        item.label = valueDescJson[j]
                      }
                    }
                    itemList.push(item)
                  }
                  addEditModal.itemList = itemList
                }
                
            },
            edit() {
                utils.edit(this).then(res => {
                  utils.getSysInfo(this)
                })
            },
            showDetailModal(row) {
                let detailModal = this.$refs.detailModal
                detailModal.form = JSON.parse(JSON.stringify(row))
                detailModal.form.value = JSON.parse(row.value)
                detailModal.form.comment = JSON.parse(row.comment)
                detailModal.modal.detail = true
				detailModal.getDictItemsDisplayValue()
            },
            showSearchModal() {
                let searchModal = this.$refs.searchModal
                searchModal.modal.search = true
            },
            batchOpt(itemName) {
                if (itemName === 'batchActive') {
                    utils.batchActive(this, 0)
                } else if (itemName === 'batchInactive') {
                    utils.batchActive(this, 1)
                } else if (itemName === 'batchRemove') {
                    utils.batchRemove(this)
                }
            },
            /**
             * 查看json详情
             */
            showContentModal(val, title) {
              let jsonModal = this.$refs.jsonModal
              jsonModal.json = JSON.parse(val)
              jsonModal.title = title
              jsonModal.jsonModal = true
            }
        }
    }
</script>

<style>
</style>
